<!--
 * @Author: jiu yin
 * @Date: 2024-04-11 10:50:32
 * @LastEditTime: 2024-04-29 12:53:38
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\pagesA\ar_navigation\components\map_nav.vue
 * jiu
-->
<template>
	<!-- 
   <view :class="{ map_showModal: true, map_border: map_nav_type_computed === 'map_nav' }" @touchstart.stop="touchStart"
      @touchend.stop="touchEnd" :style="{ height: height }"> -->

	<view class="map_showModal" :class="{ map_border: map_nav_type_computed == 'map_nav' }" :style="{ height: height, zIndex: z_index }">
		
		
		
		<view
			class="bg-#94ACA6 absolute top-10rpx left-50% translate-x--50% w-96rpx h-18rpx border-rd-8rpx z-2"
			v-show="map_nav_type_computed !== 'map_nav'"
			@touchstart.stop="touchStart"
			@touchend.stop="touchEnd"
		>
		
		
		</view>
		<!-- 小上滑图标 -->

		<amap :height="height" />
	</view>
</template>

<script>
	import amap from './amap.vue';

	export default {
		props: ['NavHeight_infoHeight'],
		components: { amap },
		data() {
			return {
				touchStartX: 0, // 触屏起始点x
				touchStartY: 0, // 触屏起始点y
				height: '100%',
				screenHeight: uni.getSystemInfoSync().screenHeight,
				z_index: 1,
			};
		},
		onLoad(options) {},
		computed: {
			// 计算属性 导航+信息栏高度
			NavHeight_infoHeight_computed() {
				return this.NavHeight_infoHeight;
			},
			map_nav_type_computed() {
				return this.$store.getters.map_nav_type;
			},
		},
		watch: {
			map_nav_type_computed(newValue, oldValue) {
				if (newValue == oldValue) return;
				console.log(newValue, 'manavv===');
				if (newValue == 'map_nav') {
					this.z_index = 20;
					this.upGlide();
				} else {
					this.z_index =23;
					this.downGlide();
				}
			},
		},
		mounted() {
			//设备高度
			this.screenHeight = uni.getSystemInfoSync().screenHeight;
		},
		methods: {
			//* 触摸开始
			touchStart(e) {
				console.log('触摸开始');
				this.touchStartX = e.touches[0].clientX;
				this.touchStartY = e.touches[0].clientY;
			},
			touchEnd(e) {
				console.log('触摸结束');
				let deltaX = e.changedTouches[0].clientX - this.touchStartX;
				let deltaY = e.changedTouches[0].clientY - this.touchStartY;
				if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
					if (deltaX >= 0) {
						console.log('左滑');
					} else {
						console.log('右滑');
					}
				} else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
					if (deltaY < 0) {
						console.log('上滑');
						this.upGlide();
					} else {
						console.log('下滑');
						this.downGlide();
					}
				} else {
					console.log('可能是误触！');
				}
			},
			// 上滑
			upGlide() {
				let height = this.screenHeight - this.NavHeight_infoHeight_computed;
				this.height = height + 'px';
				this.$store.commit('map/set_map_nav_type', 'map_nav');
			},
			// 下滑
			downGlide() {
				this.height = '428rpx';
				this.$store.commit('map/set_map_nav_type', 'ar_nav');
			},
		},

		beforeDestroy() {
			this.$store.commit('map/set_map_nav_type', 'ar_nav');
		},
	};
</script>

<style lang="scss" scoped>
	.map_showModal {
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		box-sizing: border-box;
		border-radius: 120rpx 120rpx 0rpx 0rpx;
		border: 8rpx solid #ffffff;
		border-bottom: none;
		animation: move 0.4s ease-in forwards;
		/* background: url("https://resources.ym2meta.com/web-smart-tour/max_map.png") no-repeat; */
		/* background-size: cover; */
		transition: 0.4s ease-in;
	}

	.map_border {
		border-radius: 0;
		border: none;
	}

	@keyframes move {
		from {
			bottom: -428rpx;
		}

		to {
			bottom: 0;
		}
	}
</style>
